<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">人生清单</block>
		</cu-custom>
		<view class="bigbox">
				<view class="top">
					<view class="box">
						<view class="title">
							人生已完成列表
						</view>
						<view class="process">
							完成度：{{process}}%
						</view>
					</view>
					<view class="tips">Tip：已完成的事项可长按添加备忘录</view>
				</view>
				<view class="content">
					<view :class="['sbox', {'active': item.completed},{ 'has-dot': item.detail }]"
						v-for="item,index in lifething" :key="index" @longpress='longpress(index)'
						@click="completed(index)">
						{{item.content}}
					</view>
					<view class="sbox special" @click="add">操作事项</view>
					<view v-if="showDot" class="view"></view>
				</view>
				<van-popup :show="show" position="bottom" :round="true" custom-style='height:700rpx;' @close="Close">
					<view class="picker">
						<view class="name">
							<van-cell-group>
								<van-field :value="lifething[index].content" readonly size='large' class="myclass" />
							</van-cell-group>
						</view>
						<view class="detail">
							<van-cell-group>
								<van-field :value="value" type="textarea" @change="Changedetail" placeholder="记录些什么吧..."
									size='large' autosize maxlength='200' />
							</van-cell-group>
						</view>
						<view class="btn">
							<view class="commit" @click="update">
								<van-icon name="success" size='50rpx' />
							</view>
						</view>
					</view>
				</van-popup>
				
			</view>
		
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	
	export default {
		computed: {
			...mapState('m_life', ['lifething']),
			...mapState('m_user', ['token', 'userinfo']),
			process() {
				let num = 0;
				this.lifething.forEach(item => {
					if (item.completed)
						num++
				})
				return num;
			}
		},
		data() {
			return {
				bucketList: [
					"学语言", "写书", "驾车", "健身", "旅行",
					"慈善", "创业", "跳伞", "绘画", "餐饮业",
					"培养兴趣", "读书", "登山", "瑜伽", "乐器演奏",
					"志愿者", "摄影", "种植花园", "演讲", "做义工",
					"钢琴弹奏", "参加马拉松", "学习编程", "做家务", "学习投资",
					"小世界旅行", "学习烹饪", "学习手工艺", "打篮球", "写诗",
					"打高尔夫", "学习舞蹈", "修电脑", "制作短片", "学习织毛衣",
					"打网球", "游泳", "攀岩", "学习心理学", "画油画",
					"曲棍球", "学习剪辑", "设计服装", "学习哲学", "烘焙",
					"学习金融", "学习摄像", "挑战极限", "学习营销", "钓鱼",
					"写日记", "打羽毛球", "学习哲学", "学习动画", "温泉旅行",
					"学习心理学", "学习设计", "替他人做好事", "在沙滩上散步", "学习瑜伽",
					"吃世界美食", "学习摄影", "快乐善待他人", "学习绘画", "学习舞蹈",
					"亲近大自然", "学习音乐", "完成梦想清单", "学习写作", "在雨中跳舞",
					"学习园艺", "探索古迹", "学习雕塑", "做义工", "学习雕刻",
					"给他人帮助", "学习油画", "品尝美食", "学习陶艺", "享受阳光",
					"学习黑白摄影", "与朋友烧烤", "学习陶瓷", "赏花", "学习陶瓷绘画",
					"整理旅行相册", "学习布艺", "与家人共进晚餐", "学习打印术", "周末做自由工作",
					"学习图案设计", "组织派对", "学习鞋帽设计", "与朋友一起自驾游", "学习珠宝设计",
					"学习纺织设计", "与亲人开心度假", "学习家居设计", "被老师点名批评", "被老师点名表扬"
				],
				show: false,
				index: 0,
				value: '',
				second: 2,
				showadd: false,
				title:'',
				
			};
		},
		watch: {
			token(newValue, oldValue) {
				this.getlifething()
			}
		},
		onLoad() {
			this.bucketList = this.bucketList.map(item => {
				return {
					completed: false, // 默认所有项目都未完成  
					content: item,
					detail: ''
				};
			});
			if (!this.lifething.length) this.getlifething()
		},
		methods: {
			...mapMutations('m_life', ['updatelifething']),
			async getlifething() {
				if (this.token === '') return
				const data = await uni.$http.get('/get/getlifething')
				if (data.data.status === 0) {
					if (!data.data.data) {
						const result = await uni.$http.post('/update/updatelifething', {
							lifething: this.bucketList
						})
						if (result.data.status === 0) {
							this.updatelifething(this.bucketList)
						}
					} else
						this.updatelifething(data.data.data)
				}

			},
			async completed(index) {
				this.lifething[index].completed = !this.lifething[index].completed
				const result = await uni.$http.post('/update/updatelifething', {
					lifething: this.lifething
				})
				if (result.data.status === 0) {
					this.updatelifething(this.lifething)
				}
			},
			longpress(index) {
				if (!this.lifething[index].completed) return
				this.index = index
				this.value = this.lifething[index].detail
				this.show = true
			},
			Changedetail(e) {
				this.value = e.detail
			},
			Close() {
				this.show = false
				this.value = ''
			},
			
			async update() {
				if (!this.value) {
					uni.showToast({
						title: '内容不能为空',
						icon: 'none'
					})
					return
				}
				this.show = false
				let array = [...this.lifething]
				array[this.index].detail = this.value
				const result = await uni.$http.post('/update/updatelifething', {
					lifething: array
				})
				if (result.data.status === 0) {
					this.updatelifething(array)
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 2000
						});
						if (this.second <= 0) {
							clearInterval(timer)
							this.value = ''
							return
						}
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 2000
						});
					}, 1000)
				} else {
					uni.showToast({
						title: '添加失败',
						icon: 'error',
						duration: 2000
					});
					this.value = ''
				}

			},
			add(){
				// this.showadd=true
				uni.navigateTo({
					url:'/subpkg/operationalTasks/operationalTasks'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.list {
		margin: 30rpx 20rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0px 0px 24px -1px rgba(0, 0, 0, 0.1);
	}

	.bigbox {
		
		width: 95%;
		height: 70%;
		margin: 0rpx 20rpx;
		background-color: #FFFFFF;
		padding-bottom: 50rpx;
		margin-top: 50rpx;
		.top {
			height: 130rpx;
			width: 100%;
			background-color: #f9cdad;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 88rpx;

				.title {
					margin-left: 20rpx;
					font-size: 40rpx;
				}

				.process {
					border-radius: 15rpx;
					background-color: transparent;
					font-size: 30rpx;
					margin-right: 20rpx;
				}

			}

			.tips {
				color: antiquewhite;
			}
		}

		.content {
			height: 90%;
			display: flex;
			flex-wrap: wrap;
			overflow: auto;
			border: 1rpx solid #f9cdad;
			padding-left: 10rpx;
			padding-bottom: 20rpx;
			border-bottom-right-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			.sbox {
				position: relative;
				background-color: antiquewhite;
				margin: 10rpx;
				padding: 10rpx;
				border-radius: 2rpx;
			}

			.special {
				background-color: #ABD0CE;
			}

			.active {
				background-color: #f9c00c;
			}
		}

	}

	.btn {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

		.commit {
			background-color: #f9cdad;
			height: 100rpx;
			width: 100rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
	}

	.dot {
		position: absolute;
		top: 0;
		right: 0;
		width: 10rpx;
		height: 10rpx;
		background-color: red;
		border-radius: 50%;
	}

	.has-dot:before {
		content: "";
		display: block;
		position: absolute;
		top: -3rpx;
		right: -3rpx;
		width: 14rpx;
		height: 14rpx;
		background-color: #ABD0CE;
		border-radius: 50%;
	}
</style>